<template>
  <div class="industry main-body clearfix">
    <h2>
      <i class="iconfont iconInformation_icon_zixun" />
      <em class="blue-text">行业</em>资讯 • Industry Information
      <button>查看更多</button>
    </h2>
    <div class="industryTxt">
      <div class="industryTxtOne clearfix">
        <img src="../../../assets/img/home/indystry_img_kuangweixie.png" alt="">
        <ul class="hot-content-bottom-list">
          <li>万双名牌运动鞋被查！快来看看有哪些品牌？</li>
          <li>今年最最最火的4种单鞋，我不允许你没有！</li>
          <li>万双名牌运动鞋被查！快来看看有哪些品牌？</li>
          <li>今年最最最火的4种单鞋，我不允许你没有！</li>
          <li>万双名牌运动鞋被查！快来看看有哪些品牌？</li>
          <li>今年最最最火的4种单鞋，我不允许你没有！</li>
          <li>万双名牌运动鞋被查！快来看看有哪些品牌？</li>
          <li>今年最最最火的4种单鞋，我不允许你没有！</li>
          <li>万双名牌运动鞋被查！快来看看有哪些品牌？</li>
        </ul>
      </div>
      <div class="industryTxtTwo industryTxtOne clearfix">
        <img src="../../../assets/img/home/indystry_img_laoren.png" alt="">
        <ul class="hot-content-bottom-list">
          <li>万双名牌运动鞋被查！快来看看有哪些品牌？</li>
          <li>今年最最最火的4种单鞋，我不允许你没有！</li>
          <li>万双名牌运动鞋被查！快来看看有哪些品牌？</li>
          <li>今年最最最火的4种单鞋，我不允许你没有！</li>
          <li>万双名牌运动鞋被查！快来看看有哪些品牌？</li>
          <li>今年最最最火的4种单鞋，我不允许你没有！</li>
          <li>万双名牌运动鞋被查！快来看看有哪些品牌？</li>
          <li>今年最最最火的4种单鞋，我不允许你没有！</li>
          <li>万双名牌运动鞋被查！快来看看有哪些品牌？</li>
        </ul>
      </div>
    </div>
    <div class="recommend">
      <div class="title">
        推荐资讯
      </div>
      <div class="recommendTxt">
        <ul>
          <li>
            <p>夏天来了 Miss Sixty当季新品来点不…</p>
            <div class="recommendTxtBanner clearfix">
              <img src="../../../assets/img/home/banner.png" alt="">
              <span>现在，达芙妮的市值仅仅4亿港元之多，距离7年前超过…</span>
            </div>
          </li>
          <li v-for="i in 9" :key="i" class="clearfix">
            <b>{{ i+1 }}</b>线上渠道将关闭而且 …
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Industry',
  data() {
    return {}
  }
}
</script>

<style lang='scss' scoped>
  @import '../../../assets/template-item1/css/base.scss';
  .industry{
    @include panel;
    h2 {
      button {
          float: right;
          @include btn;
          margin-top: 25px;
      }
      button:hover {
        border: none;
        background-color: #D9D9D9;
      }
    }
    .industryTxt{
      margin: 20px 0;
      height: 100%;
      float: left;
      .industryTxtOne{
        img{
          width: 384px;
          height: 287px;
          float: left;
        }
        .hot-content-bottom-list {
          float: left;
          li {
              text-indent: 20px;
              overflow: hidden;
              -ms-text-overflow: ellipsis;
              text-overflow: ellipsis;
              white-space: nowrap;
              position: relative;
              font-size: 16px;
              line-height: 32px;
              margin-left: 40px;
              &:after {
                  position: absolute;
                  left: 0;
                  top: 50%;
                  -webkit-transform: translateY(-50%);
                  -moz-transform: translateY(-50%);
                  -ms-transform: translateY(-50%);
                  -o-transform: translateY(-50%);
                  transform: translateY(-50%);
                  display: block;
                  content: '';
                  width: 6px;
                  height: 6px;
                  -webkit-border-radius: 3px;
                  -moz-border-radius: 3px;
                  border-radius: 3px;
                  background-color: #b9b9b9;
              }
          }
          li:nth-child(1){
            font-size:20px;
            font-weight:600;
            color:rgba(51,51,51,1);
          }
          li:hover{
            color: #417AEF;
          }
        }
      }
      .industryTxtTwo{
        margin-top: 15px;
      }
    }
    .recommend{
      margin: 20px 0;
      float: right;
      width: 318px;
      height: 100%;
      border:1px solid #cccccc;
      .title{
        width:100%;
        height:52px;
        background:rgba(229,229,229,1);
        text-align: center;
        line-height: 52px;
        font-size:20px;
        font-weight:600;
        color:rgba(51,51,51,1);
      }
      ul{
        padding: 20px 15px;
        li{
          border-bottom: 1px dashed #cccccc;
          font-size:16px;
          line-height:42px;
          color:rgba(51,51,51,1);
          b{
            width: 20px;
            height: 20px;
            display: block;
            text-align: center;
            line-height: 20px;
            background-color: #417AEF;
            color: #fff;
            float: left;
            margin-top: 8px;
            margin-right: 10px;
          }
          .recommendTxtBanner{
            margin: 10px 0;
            img{
              float: left;
              width: 90px;
              height: 64px;
            }
            span{
              width:180px;
              height:50px;
              display: block;
              float: left;
              font-size:14px;
              color: #cccccc;
              margin: 5px;
              line-height:24px;
            }
          }
        }
        li:hover{
          color: #417AEF;
        }
      }
    }
  }
</style>
